<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!--引入cesium基础lib-->
		<link href="https://registry.npmmirror.com/mars3d-cesium/latest/files/Build/Cesium/Widgets/widgets.css"
			rel="stylesheet" type="text/css" />
		<script src="https://registry.npmmirror.com/mars3d-cesium/latest/files/Build/Cesium/Cesium.js"
			type="text/javascript"></script>

		<!--引入mars3d库lib-->
		<link href="https://registry.npmmirror.com/mars3d/latest/files/mars3d.css" rel="stylesheet" type="text/css" />
		<script src="https://registry.npmmirror.com/mars3d/latest/files/mars3d.js" type="text/javascript"></script>
		<style>
			html,
			body,
			.mars3d-container {
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
				border: none;
				overflow: hidden;
			}
			.labelStyle{
				background-color: pink;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<!-- 为 Mars3D 准备一个定义了宽高的 DOM -->
		<div id="mars3dContainer" class="mars3d-container"></div>
		<script type="text/javascript">
		

			// 初始化地图
			const mapOptions = {
				basemaps: [{
					name: "天地图",
					type: "tdt",
					layer: "img_d",
					show: true
				}],
				scene: {
					center: {
						lat: 37.520538, // 3d模型加载要与scene场景的中心经纬度一直才能再视角内看到
						lng: 122.030263,
						alt: 680.4, // 高度
						// heading: 5.843543111393644,
						pitch: -60,
						// roll: '6.283179332387251',
						duration: 1.5,
					} // 示例位置：上海
				}
			};

			const map = new mars3d.Map("mars3dContainer", mapOptions);

			// 加载3D Tileset倾斜摄影模型
			const tilesetLayer = new mars3d.layer.TilesetLayer({
				url: 'http://localhost:8080/Apps/assets/media/gaoquyingji/tiles/01_guanwei/tileset.json', // 园区瓦片
				// url: 'http://localhost:8080/Apps/assets/media/gaoquyingji/tiles/02_chuangyejidi/tileset.json', // 园区瓦片
				
				maximumScreenSpaceError: 1, // 数值加大，能让最终成像变模糊
			});
			map.addLayer(tilesetLayer);
			
			const tilesetLayer1 = new mars3d.layer.TilesetLayer({
				url: 'http://localhost:8080/Apps/assets/media/gaoquyingji/tiles/02_chuangyejidi/tileset.json', // 园区瓦片
				// url: 'http://localhost:8080/Apps/assets/media/gaoquyingji/tiles/02_chuangyejidi/tileset.json', // 园区瓦片
				
				maximumScreenSpaceError: 1, // 数值加大，能让最终成像变模糊
			});
			map.addLayer(tilesetLayer1);
	  // 加载完成事件

tilesetLayer.on('load', (event) => {
				console.log('Tileset 加载完成', event);
			});
			
			
			
		
		</script>
	</body>
</html>